<?php include "../public/header.php"?>
<style>
    #choose_div{border-left: 1px solid #e3e3e3;padding-right: 20px;padding-left: 20px;}
    .choose_title{height: 40px;line-height: 40px;}
    .choose_title span:first-child{float: left;}
    .choose_title span:last-child{float: right;cursor: pointer;}
    #choose_content{clear: both;}
    #choose_content .choose_item{height: 25px;line-height: 25px;background: #e3e3e3;margin-top: 5px;}
    #choose_content .choose_item span:first-child{float: left;padding-left: 15px;}
    #choose_content .choose_item span:last-child{font-size: 16px;font-weight: bold;color: red;float: right;padding-right: 15px;cursor: pointer;}
</style>
<body class="dialogPage">
<div id="dialog">
    <div class="page-title" id="page-title">
        <div class="page-title-con">
            <span class="title">选择用户(多选)</span>
            <div class="move_title"></div>
            <div class="page-title-opt-list">
                <button class="layui-btn layui-btn-sm btn-dark marginr5" type="button" id="submit">确定</button>
                <span id="page-close" class="page-close" onclick="layer_close()">×</span>
            </div>
        </div>
    </div>

    <div class="layui-fluid">
        <div class="layui-row">
            <div class="layui-col-md6 layui-col-xs6">
                <div class="layui-card">
                    <div class="layui-card-body search-div">
                        <div class="layui-form">
                            <div class="layui-inline layui-show-xs-block" style="width: 100%;">
                                <input type="text" id="keyword" style="width: 58%;float: left;" autocomplete="off" placeholder="姓名" class="layui-input">
                                <button class="layui-btn layui-btn-sm btn-light" type="button" id="search" style="margin-left: 5px;"><i class="layui-icon layui-icon-search"></i>查询</button>
                                <button class="layui-btn layui-btn-sm layui-btn-primary" onclick="location.reload()" ><i class="layui-icon layui-icon-refresh"></i>重置</button>
                            </div>
                        </div>
                    </div>
                    <div class="layui-card-body">
                        <div id="tree_content" class="demo-tree demo-tree-box"></div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6 layui-col-xs6" id="choose_div">
                <div class="choose_title">
                    <span>已选择:</span>
                    <span onclick="empty()"><i class="layui-icon layui-icon-delete" style="color: #ff7052"></i>清空</span>
                </div>
                <div id="choose_content"></div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    // 重选设置默认选中
    var oldData = getQueryVariable('old_data');
    var oldDataArr = [];
    if(oldData){
        oldDataArr = JSON.parse(decodeURI(oldData));
        var str = '';
        for (var i=0; i<oldDataArr.length; i++){
            str += '<div class="choose_item" key="'+oldDataArr[i].key+'" name="'+oldDataArr[i].name+'">';
            str += '<span><i class="layui-icon layui-icon-username"></i>&nbsp;&nbsp;'+oldDataArr[i].name+'</span>';
            str += '<span onclick="delete_row(this)">×</span>';
            str += '</div>';
        }
        $('#choose_content').append(str);
    }

    // 页面绑定节点元素
    var parent_dom = getQueryVariable('dom');

    // 清空
    function empty() {
        $('#choose_content').html('');
    }
    // 删除列
    function delete_row(obj) {
        $(obj).parent().remove();
    }

    layui.use(['table','form','element','tree','facade'],function() {
        var table = layui.table;
        var tree = layui.tree;
        var facade = layui.facade;

        facade.ajax({url: ask_opt_get_dept_user}).done(function(res){
            if (res.code === 2000) {
                //常规用法
                tree.render({
                    elem: '#tree_content' //默认是点击节点可进行收缩
                    ,onlyIconControl: true
                    ,data: res.data
                    ,click: function (obj) {
                        if(obj.data.children == undefined){
                            // 判断重复选择
                            var repeat = 0;
                            $('#choose_content .choose_item').each(function () {
                                var key = $(this).attr('key');
                                if(key == obj.data.id){
                                    repeat = 1;return false;
                                }
                            });
                            if(repeat == 1){
                                layer.msg('不能重复选择人员'); return false;
                            }
                            var str = '';
                            str += '<div class="choose_item" key="'+obj.data.id+'" name="'+obj.data.name+'">';
                            str += '<span><i class="layui-icon layui-icon-username"></i>&nbsp;&nbsp;'+obj.data.name+'</span>';
                            str += '<span onclick="delete_row(this)">×</span>';
                            str += '</div>';
                            $('#choose_content').append(str);
                        }
                    }
                });

                $('.layui-tree-entry').each(function () {
                    if($(this).next().length === 0){
                        $(this).find('.layui-tree-iconClick').remove();
                    }
                });
                $('.layui-tree-txt').css('text-decoration','none');
            }
        });

        // 查询数据-以前的查询条件都会保留
        $('#search').on('click', function(){
            var keyword = $('#keyword').val();
            facade.ajax({url: ask_opt_get_dept_user,data:{keyword:keyword}}).done(function(res){
                if (res.code === 2000) {
                    //常规用法
                    tree.render({
                        elem: '#tree_content' //默认是点击节点可进行收缩
                        ,onlyIconControl: true
                        ,data: res.data
                        ,click: function (obj) {
                            if(obj.data.children == undefined){
                                // 判断重复选择
                                var repeat = 0;
                                $('#choose_content .choose_item').each(function () {
                                    var key = $(this).attr('key');
                                    if(key == obj.data.id){
                                        repeat = 1;return false;
                                    }
                                });
                                if(repeat == 1){
                                    layer.msg('不能重复选择人员'); return false;
                                }
                                var str = '';
                                str += '<div class="choose_item" key="'+obj.data.id+'" name="'+obj.data.name+'">';
                                str += '<span><i class="layui-icon layui-icon-username"></i>&nbsp;&nbsp;'+obj.data.name+'</span>';
                                str += '<span onclick="delete_row(this)">×</span>';
                                str += '</div>';
                                $('#choose_content').append(str);
                            }
                        }
                    });

                    $('.layui-tree-entry').each(function () {
                        if($(this).next().length === 0){
                            $(this).find('.layui-tree-iconClick').remove();
                        }
                    });
                    $('.layui-tree-txt').css('text-decoration','none');
                }
            });
        });

        // 确定
        $('#submit').on('click', function () {
            if($('#choose_content .choose_item').length == 0){
                layer.msg('请选择人员'); return false;
            }
            var str = '';
            $('#choose_content .choose_item').each(function (i) {
                var key = $(this).attr('key');
                var name = $(this).attr('name');
                if(i == 0){
                    str += '<button type="button" class="layui-btn layui-btn-sm btn-dark" key="'+key+'"><span class="choose_content">'+name+'' +
                        '</span><span class="choose_close" onclick="choose_close(this)">×</span></button>';
                }else{
                    str += '<button type="button" class="layui-btn layui-btn-sm btn-dark" key="'+key+'" style="margin-left: 5px !important;"><span class="choose_content">'+name+'' +
                        '</span><span class="choose_close" onclick="choose_close(this)">×</span></button>';
                }
            });
            $("#"+parent_dom , parent.document).html(str);
            layer_close();
        });
    });
</script>
</body>
</html>
